<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Select bus protocols')"
    width="500px"
    @close="store.cancel()"
  >
    <el-card>
      <div style="max-height: 60vh; overflow-y: auto;">
        <el-row v-for="(protocol, index) in store.protocolList" :key="protocol.fileName" style="margin-bottom: 0;">
          <el-col :span="24">
            <el-checkbox
              :model-value="store.selectedProtocols.includes(protocol)"
              :disabled="protocol.state !== 'OK'"
              @change="store.selectProtocol(protocol)"
              :class="{
                'protocol-error': protocol.state !== 'OK',
              }"
              style="width: 100%; padding: 8px;"
            >
              <el-text
                :type="protocol.state !== 'OK' ? 'danger' : 'default'"
              >
                {{ protocol.fileName }}
                <span v-if="protocol.state !== 'OK'"> (ERROR)</span>
              </el-text>
            </el-checkbox>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <template #footer>
      <el-button 
        type="primary" 
        :disabled="!store.canConfirm"
        @click="store.confirm()"
      >
        {{ t('OK') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useBusProtocolChooserStore } from '@/stores/busProtocolChooser'
import { useLanguageStore } from '@/stores/language'

const store = useBusProtocolChooserStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Select bus protocols': {
      'en': 'Select bus protocols',
      'zh': '选择总线协议'
    },
    'OK': {
      'en': 'OK',
      'zh': '确认'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>

<style scoped>
.protocol-error {
  background-color: var(--el-color-danger-light-9);
  border-left: 4px solid var(--el-color-danger);
}
</style> 